(function () {
    let titleId = 0;
    let num = 0,
        time = 0,
        sum = 82,
        ids;
    init()

    function init() {
        getTitleData()
        getData(titleId); //titleId 初始值为0
        $("#nav>.navList").on("click", "li", clickHandler) //设置点击事件，点击li变更titleId值
        $("#top").click(clickTop) //返回顶部

    }

    function getTitleData() { //获取标题信息，根据数据创建标题
        $.ajax({
            url: "http://chst.vip:1234/api/getbaicaijiatitle"
        }).then(res => {
            createTitleLi(res.result);
        })
    }

    function createTitleLi(data) { //创建标题
        let html = data.reduce((value, item) => {
            //给li设置titleId 以供点击事件获取titleId 
            return value += `
                <li titleId=${item.titleId}>${item.title}</li>
            `
        }, '')
        //动态创建标题容器的宽度
        $("#nav>.navList").css({
            width: data.length * 1.87 + "rem"
        }).html(html)
    }

    function getData(titleId) { //获取内容数据
        $.ajax({
            url: "http://chst.vip:1234/api/getbaicaijiaproduct?",
            data: {
                titleid: titleId
            }
        }).then(res => {
            createContent(res.result)
        })
    }

    function createContent(data) { //根据数据创建商品内容
        let html = data.reduce((value, item) => {
            return value += `
                <li>
                    <div class="left">
                        ${item.productImg}
                    </div>
                    <div class="right">
                        <h3>${item.productName}</h3>
                        <div class="price">${item.productPrice}</div>
                        <div class="animation">${item.productCouponRemain}</div>
                        <div class="click">
                            ${item.productCoupon}
                            ${item.productHref}
                        </div>
                    </div>
                </li>
            `
        }, '')
        $("#main>.list").html(html)
        ids = setInterval(animation, 50) //进度条定时器
    }

    function clickHandler() {
        clearInterval(ids); //点击时清楚进度条定时器;
        titleId = $(this).attr("titleId")
        $(this).css({
            color: "red"
        }).siblings().css({
            color: "black"
        })
        //点击的时候重置。
        num = 0;
        sum = 82;
        time = 0;
        //传入titleId 调用ajax获取对应数据
        getData(titleId);
    }

    function animation() { //进度条
        time++;
        num += 82 / 100;
        sum -= 82 / 100;
        if (time > 100) {
            clearInterval(ids); //清楚进度条定时器;
            return;
        }
        $("#main .list .right .animation span").text(`${time}%`).css({
            backgroundColor: "#fc353a"
        })
        Array.from(document.querySelectorAll("#main .list .right .animation span")).forEach(item => {
            item.style.width = `${time}%`
        })
        $("#main .list .right .animation b").text(`已领取${Math.ceil(num)}张/剩余${Math.floor(sum)}张`)
    }

    function clickTop() {
        $("html").stop().animate({
            scrollTop: 0
        }, 200)
    }
}())